<template>
    <div class="temp">
        <!--提交评论部分-->
        <div class="postComment">
            <h3>提交评论</h3>
            <div class="line"></div>
            <textarea placeholder="请输入您的评论" v-model="comment"></textarea>
            <mt-button type="primary" size="large" @click="postComment">发表</mt-button>
        </div>
        <!--获取评论列表-->
        <div class="getComments">
            <h3>评论列表</h3>
            <div class="line"></div>
            <div v-for="(item,index) in comments">
                <div class="title">
                    <span>第{{index + 1}}楼：</span>
                    <span>用户：{{item.user_name}}</span>
                    <span>发表时间：{{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
                </div>
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell" v-text="item.content"></li>
                </ul>
            </div>
            <!--加载更多评论功能-->
            <mt-button type="danger" size="large" plain @click="getmore">加载更多评论</mt-button>
        </div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';
    import common from "../../kits/common"
    export default {
        data() {
            return {
                comment: '',
                comments: [],
                pageIndex: 0
            }
        },
        created() {
            this.getComments(this.pageIndex)
        },
        props: ['artid'],
        methods: {
            postComment() {
                let comment = this.comment;
                if (comment.trim().length == 0) {
                    Toast("评论不能为空");
                    return
                }
                const url = common.apidomain + "/api/postcomment/" + this.artid;
                this.$http.post(url, {content: comment}, {emulateJSON: true}).then((response) => {
                    var body = response.body;
                    Toast({
                        message: body.message,
                        position: 'bottom',
                        duration: 5000
                    });
                });
                this.comments = [{
                    'user_name':'匿名用户',
                    'add_time':new Date(),
                    'content':comment
                }].concat(this.comments);
                this.comment = "";
            },
            getComments(pageIndex) {
                var pageId = pageIndex || 1;
                let url = common.apidomain + '/api/getcomments/' + this.artid + '?pageindex=' + pageId;
                this.$http.get(url).then((response) => {
                    let body = response.body;
                    if (body.status != 0) {
                        Toast(body.message);
                        return;
                    }
//                    this.comments = body.message;
                    this.comments.push.apply(this.comments,body.message);
//                    this.comments = this.comments.concat(body.message);

                })
            },
            getmore() {
                this.pageIndex++;
                this.getComments(this.pageIndex);
            }
        }
    }
</script>

<style scoped>
    .postComment, .getComments {
        padding: 10px;
    }

    .line {
        height: 1px;
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, .2);
        margin: 5px 0;
    }

    .title {
        background-color: rgba(0, 0, 0, .1);
        color: gray;
        font-size: 14px;
        line-height: 2em;
    }
</style>